<template>
  <el-card>
    <!-- 顶部内容 -->
    <div class="pagination">
      <el-button
        type="success"
        size="small"
        icon="el-icon-edit"
        style="background: #67c23a; color: #fff"
        @click="addMenus = true"
      >
        添加菜单
      </el-button>
    </div>
    <!-- 新增权限组选项 -->
    <!-- <div class="options">
      <el-table v-if="addMenus"
                :data="menusList"
                default-expand-all
                row-key="id">
        <el-table-column label=""
                         row-click="handleLog"
                         prop="title" />
      </el-table>
    </div> -->
    <!-- 树形表格 -->
    <el-table :data="menusList" default-expand-all row-key="id">
      <el-table-column label="标题">
        <template #default="{ row }">
          <i v-if="!row.pid" class="el-icon-folder-opened"></i>
          <i v-else class="el-icon-folder"></i>
          <span style="margin-left: 10px">{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="权限点代码" prop="code" width="700px" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleOpenEdit(row.id)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handelMenusDel(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增菜单 -->
    <el-dialog title="新增菜单" :visible="addMenus" @close="handleAddClose">
      <!-- 表单 -->
      <el-form :model="fromData" label-width="270px">
        <el-form-item label="权限组名称">
          <el-radio-group v-model="fromData.is_point">
            <el-radio :label="false"> 菜单列表 </el-radio>
            <el-radio :label="true"> 权限点 </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="fromData.pid" placeholder="请选择活动区域">
            <el-option label="主导航" :value="0" />
            <el-option
              v-for="item in menus"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码">
          <el-input v-model="fromData.code" style="width: 50%" />
        </el-form-item>
        <el-form-item label="权限标题">
          <el-input v-model="fromData.title" style="width: 50%" />
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <template #footer>
        <el-button type="" size="small" @click="handleAddClose">取消</el-button>
        <el-button
          type="primary"
          size="small"
          style="background-color: #409eff; color: #fff"
          @click="handleAddMenus"
        >
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 编辑菜单 -->
    <el-dialog title="编辑菜单" :visible="EditMenus" @close="handleEditClose">
      <!-- 表单 -->
      <el-form :model="fromData" label-width="270px">
        <el-form-item label="权限组名称">
          <el-radio-group v-model="fromData.is_point">
            <el-radio :label="false" disabled> 菜单列表 </el-radio>
            <el-radio :label="true" disabled> 权限点 </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="fromData.pid" placeholder="请选择活动区域">
            <el-option label="主导航" :value="0" />
            <el-option
              v-for="item in menus"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码">
          <el-input v-model="fromData.code" style="width: 50%" />
        </el-form-item>
        <el-form-item label="权限标题">
          <el-input v-model="fromData.title" style="width: 50%" />
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <template #footer>
        <el-button type="" size="small" @click="handleEditClose">
          取消
        </el-button>
        <el-button
          type="primary"
          size="small"
          style="background-color: #409eff; color: #fff"
          @click="handleEdit"
        >
          确定
        </el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  getMenusListAPI,
  delMenusAPI,
  addMenusAPI,
  getMenusDetailAPI,
  putMenusAPI
} from '@/api/base-menus'
import list2Tree from '@/utils/shift'
export default {
  // 组件名称
  name: 'MenusView',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      // 菜单树形数据
      menusList: [],
      // 菜单列表数据
      menus: [],
      // 控制新增菜单弹窗显示
      addMenus: false,
      // 表单数据
      fromData: {
        is_point: false,
        pid: '',
        code: '',
        title: ''
      },
      // 控制编辑弹框显示
      EditMenus: false
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getMenusList()
    // this.menusList = this.testList
  },
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {},
  // 组件方法
  methods: {
    // 获取菜单列表
    async getMenusList() {
      const res = await getMenusListAPI()
      const arr = this.handle(res)
      // console.log(arr)
      // console.log(list2Tree(arr, null))
      this.menus = arr
      this.menusList = list2Tree(arr, null)
    },
    // 处理树转列表数据函数
    handle(tree) {
      const arr = []
      tree.forEach((item) => {
        // 判断有无孩子
        if (item.points) {
          const children = this.handle(item.points)
          delete item.points
          arr.push(item, ...children)
        } else if (item.childs) {
          const children = this.handle(item.childs)
          delete item.childs
          arr.push(item, ...children)
        } else {
          arr.push(item)
        }
      })
      return arr
    },
    // 关闭新增菜单弹窗
    handleAddClose() {
      this.addMenus = false
    },
    // 删除菜单
    async handelMenusDel(id) {
      try {
        await this.$confirm('确定删除吗', '提示', {
          type: 'warning'
        })
        await delMenusAPI(id)
        // console.log(res)
        // 刷新列表
        this.getMenusList()
        // 提示成功
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.warning('已取消')
      }
    },
    handleLog(row) {
      // console.log(1)
    },
    // 新增菜单
    async handleAddMenus() {
      const res = await addMenusAPI({
        ...this.fromData,
        id: ''
      })
      // console.log(res)
      // 关闭弹框
      this.handleAddClose()
      // 刷新数据
      this.getMenusList()
    },
    // 关闭编辑弹窗
    handleEditClose() {
      this.EditMenus = false
    },
    // 打开编辑弹窗
    async handleOpenEdit(id) {
      this.MenusId = id
      this.EditMenus = true
      const res = await getMenusDetailAPI(id)
      console.log(res)
      this.fromData = res
    },
    // 编辑菜单
    async handleEdit() {
      await putMenusAPI(this.MenusId, this.fromData)
      // console.log(res)
      // 关闭弹窗
      this.handleEditClose()
      // 刷新页面
      this.getMenusList()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="scss">
/* .el-card {
  margin: 20px;
  margin-top: 90px;
} */

::v-deep .el-dialog__header {
  background: blue;
}
::v-deep .el-dialog__title {
  color: white;
}
.el-alert {
  margin-top: 20px;
}
.el-button--primary {
  color: #409eff;
  background-color: #ecf5ff;
  &:hover {
    color: #fff;
    background-color: #409eff;
  }
}
.el-button--danger {
  color: #f56c6c;
  background-color: #fef0f0;
  &:hover {
    color: #fef0f0;
    background-color: #f56c6c;
  }
}
.pagination {
  display: flex;
  justify-content: right;
}
.options {
  position: fixed;
  top: 355px;
  left: 675px;
  width: 230px;
  z-index: 9999;
  // border: 1px solid #ccc;
}
</style>
